<template>
  <div class="admin-layout">
    <el-container>
      <el-aside width="220px">
        <el-menu
          :default-active="$route.path"
          router
          class="admin-menu">
          <div class="menu-header">
            <div class="user-avatar">
              <el-avatar :size="64" :src="userAvatar" />
            </div>
            <div class="user-info">
              <h3>{{ $store.state.user.name || '管理员' }}</h3>
              <p>系统管理员</p>
            </div>
          </div>
          
          <div class="menu-group">
            <div class="group-title">工作台</div>
            <el-menu-item index="/admin/dashboard">
              <el-icon><Monitor /></el-icon>
              <span>数据概览</span>
            </el-menu-item>
            <el-menu-item index="/admin/messages">
              <el-icon><Message /></el-icon>
              <span>消息管理</span>
            </el-menu-item>
          </div>

          <div class="menu-group">
            <div class="group-title">用户管理</div>
            <el-menu-item index="/admin/account">
              <el-icon><User /></el-icon>
              <span>账户管理</span>
            </el-menu-item>
            <el-menu-item index="/admin/volunteers">
              <el-icon><UserFilled /></el-icon>
              <span>志愿者管理</span>
            </el-menu-item>
          </div>

          <div class="menu-group">
            <div class="group-title">项目管理</div>
            <el-menu-item index="/admin/projects">
              <el-icon><List /></el-icon>
              <span>志愿项目</span>
            </el-menu-item>
            <el-menu-item index="/admin/teams">
              <el-icon><Users /></el-icon>
              <span>志愿队伍</span>
            </el-menu-item>
            <el-menu-item index="/admin/hours">
              <el-icon><Timer /></el-icon>
              <span>时长管理</span>
            </el-menu-item>
          </div>

          <div class="menu-group">
            <div class="group-title">系统管理</div>
            <el-menu-item index="/admin/website">
              <el-icon><House /></el-icon>
              <span>网站管理</span>
            </el-menu-item>
            <el-menu-item index="/admin/config">
              <el-icon><Setting /></el-icon>
              <span>系统配置</span>
            </el-menu-item>
          </div>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {
  Monitor,
  User,
  House,
  Timer,
  Message,
  UserFilled,
  List,
  UserFilled as Users,
  Setting
} from '@element-plus/icons-vue'

const userAvatar = ref('https://placeholder.com/150')
</script>

<style scoped lang="scss">
.admin-layout {
  height: 100%;
  background-color: #f5f7fa;
}

.el-aside {
  background-color: #fff;
  border-right: 1px solid #e6e6e6;
  height: calc(100vh - 60px);
}

.admin-menu {
  border-right: none;
}

.menu-header {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 16px;

  .user-avatar {
    margin-bottom: 12px;
  }

  .user-info {
    h3 {
      margin: 0 0 4px;
      font-size: 16px;
      color: #303133;
    }

    p {
      margin: 0;
      font-size: 13px;
      color: #909399;
    }
  }
}

.menu-group {
  margin-bottom: 16px;

  .group-title {
    padding: 0 20px;
    margin: 8px 0;
    font-size: 12px;
    color: #909399;
    line-height: 24px;
  }
}

:deep(.el-menu-item) {
  height: 48px;
  line-height: 48px;
  
  .el-icon {
    font-size: 18px;
  }

  &:hover {
    background-color: #f0f7ff;
  }

  &.is-active {
    background-color: #e6f2ff;
    color: #409EFF;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background-color: #409EFF;
    }
  }
}

.el-main {
  padding: 24px;
}
</style> 